<template>
  <div id="order-page">
    <!-- 订单开始 -->
    <div class="order">
      <div class="title">我的订单</div>
      <div class="menu">
        <el-menu
          :default-active="activeIndex"
          active-text-color="#409EFF"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="lessonOrder">课程订单</el-menu-item>
          <el-menu-item index="vipOrder">VIP订单</el-menu-item>
        </el-menu>
      </div>
      <!-- 订单内容 -->
      <div
        v-if="activeIndex == 'lessonOrder'"
        class="order-content lesson-order"
      >
        <el-table
          :data="lessonOrderData"
          height="70vh"
          border
          style="width: 100%"
        >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="昵称" width="180">
          </el-table-column>
          <el-table-column prop="price" label="金额" width="180">
          </el-table-column>
          <el-table-column prop="status" label="交易状态" width="180">
          </el-table-column>
          <el-table-column prop="orderid" label="订单号"> </el-table-column>
        </el-table>
      </div>
      <div v-else class="order-content vip-order">
        <el-table :data="vipOrderData" height="70vh" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="price" label="金额" width="180">
          </el-table-column>
          <el-table-column prop="viptype" label="VIP类型" width="180">
          </el-table-column>
          <el-table-column prop="status" label="交易状态" width="180">
          </el-table-column>
          <el-table-column prop="orderid" label="订单号"> </el-table-column>
        </el-table>
      </div>
      <!-- 分页开始 -->

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
    <!-- 订单结束 -->
    <index-footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "lessonOrder",
      lessonOrderData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          orderid: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          orderidaddress: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      vipOrderData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          price: "23.23",
          orderid: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          price: "2",
          name: "王小虎",
          orderidaddress: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
  },
};
</script>

<style scoped>
#order-page {
  background-color: #80808020;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#order-page .order {
  background-color: #fff;
  width: 85%;
  margin: 30px auto;
  border-radius: 10px;
}

#order-page .order .title {
  font-size: 20px;
  font-weight: bold;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  line-height: 80px;
  margin-left: 20px;
}

#order-page .order .pagination{
    width: 40%;
    margin: 20px auto;
    line-height: 40px;
}
</style>